<template>
  <div class="barChart">
    <Echarts autoresize ref="lines" class="lines" :option="option"></Echarts>
  </div>
</template>
<script>
import Echarts from "vue-echarts";
export default {
  data() {
    return {
      option: {
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(31, 45, 61, .75)",
          borderColor: "rgba(31, 45, 61, .75)",
          textStyle: {
            color: "#fff"
          },
          padding: [5, 10],
          axisPointer: {
            type: "none"
          },
          formatter: function(params) {
            console.log(params, "ssssssssssss");
            if (!params) return;
            let detail = `<div style="width: 210px;"><div style="font-size: 14px">北京市 ${params[0].name}</div>`;
            params.forEach(item => {
              detail += `<div>                                
                                <span style="background: ${item.color
                                  ?.colorStops[0]?.color || "#4188F3"};
                                            font-size: 12px;display: 
                                            inline-block;
                                            width: 8px;
                                            height: 8px; 
                                            border-radius: 2px;
                                            margin-right: 5px"></span>
                                <span style="font-size: 12px;color: #fff">${item?.seriesName ||
                                  ""}: ${item?.data || 0}${item?.unit ||
                "元"}</span>
                            </div>`;
            });
            detail += "</div>";
            return detail;
          }
        },
        color: [
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#4188F3" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#64B9FF" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#F76B1C" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FAD961" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
        ],
        legend: {
          type: "plain",
          show: true,
          bottom: 0,
          itemGap: 16, //图例各项之间的间距，
          itemWidth: 8,
          itemHeight: 8,
          selectedMode: false,
          textStyle: {
            color: "#909399",
            fontSize: 12
          },
          icon: "roundRect"
        },
        grid: {
          left: 30,
          top: 40,
          bottom: 65,
          right: 10
        },
        dataZoom: [{
            type: "slider",
            show: true,
            height: 0,
            backgroundColor: "#fff",
            selectedDataBackground: {
                lineStyle: {
                    color: "#D8D8D8",
                }
            },
            xAxisIndex: [0],
            startValue: 0,
            endValue: 4,
            bottom: 30,
            handleIcon: "none",
            moveHandleIcon: "none",
            showDetail: false,
            moveHandleStyle: {
                color: "#D8D8D8",
                borderRadius: 3,
            },
            emphasis: {
                moveHandleStyle: {
                    color: "#b6b7b9"
                }
            }
        }],
        xAxis: {
          show: true,
          data: ["2014", "2015", "2016", "2017", "2018", "2019", "2019", "2019", "2019", "2019", "2019", "2019", "2019", "2019", "2019"],
          axisLine: {
            lineStyle: {
              color: "#E8E8E8"
            }
          },
          silent: true,
          axisTick: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
                color: "#E8E8E8"
            }
          },
          axisLabel: {
            color: "#909399",
            padding: [5, 0, 0, 0]
          },
          axisPointer: {
              type: "shadow",
              shadowStyle: {
                  color: "#0160C0",
                  opacity: 0.1,
              }
          }
        },

        yAxis: {
          show: true,
          type: "value",
          name: "单位：元",
          nameGap: 20,
          nameTextStyle: {
            align: "center"
          },
          axisLabel: {
            fontSize: 12,
            color: "#909399"
          },
          splitLine: {
            lineStyle: {
              color: "#F0F0F0"
            }
          }
        },
        series: [
          {
            name: "人均医疗费用支出",
            type: "bar",
            symbol: "circle",
            showSymbol: false,
            symbolSize: 2,
            data: [10, 10, 30, 12, 15, 3, 7],
            itemStyle: {
              borderRadius: 5
            },
            barWidth: 10,
            animation: true,
            smooth: true
          },
          {
            name: "全市人均医疗费用支出",
            type: "bar",
            symbol: "circle",
            showSymbol: false,
            symbolSize: 2,
            data: [44, 14, 5, 56, 15, 3, 7],
            itemStyle: {
              borderRadius: 5
            },
            barWidth: 10,
            animation: true,
            smooth: true
          },
          {
            name: "全市人均医疗费用支出",
            type: "bar",
            symbol: "circle",
            showSymbol: false,
            symbolSize: 2,
            data: [44, 14, 5, 56, 15, 3, 7],
            itemStyle: {
              borderRadius: 5
            },
            barWidth: 10,
            animation: true,
            smooth: true
          },

        ]
      }
    };
  },
  components: {
    Echarts
  }
};
</script>
<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
  margin-top: 5px;
}
</style>